Mistj's Digital Garden

Appearance

0x05d-sass to less

百分号处理 ​

%clearfix 中的 % 符号在 Sass (Syntactically Awesome Style Sheets) 中表示一个占位符选择器 (placeholder selector)。 占位符选择器是一种特殊的选择器，它不会直接生成 CSS 代码，而是被设计成通过 @extend 指令来继承其样式的模板。

scss
%clearfix {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.container {
  @extend %clearfix;
  // 其他样式
}
%clearfix {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.container {
  @extend %clearfix;
  // 其他样式
}

迁移到less:

在 Less 中，没有像 Sass 那样直接对应的占位符选择器 (%)。但是，你可以使用 Mixin 来模拟类似的功能。以下是如何将 Sass 中的占位符选择器转换为 Less 中的 Mixin 的方法：

less
.clearfix {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.container {
  .clearfix();
  // 其他样式
}
.clearfix {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.container {
  .clearfix();
  // 其他样式
}

$xx 变量 ​

scss
$theme-name: "dark-blue";
body {
  &.{$theme-name} {
    background-color: #333;
    color: #fff;
  }
}

$transition-time: 0.35s;
.app-main {
  transition: padding-left $transition-time;
}
$theme-name: "dark-blue";
body {
  &.{$theme-name} {
    background-color: #333;
    color: #fff;
  }
}

$transition-time: 0.35s;
.app-main {
  transition: padding-left $transition-time;
}
less
@theme-name: dark-blue;
body {
  &.@{theme-name} {
    background-color: #333;
    color: #fff;
  }
}

@transition-time: 0.35s;
.app-main {
  transition: padding-left @transition-time;
}
@theme-name: dark-blue;
body {
  &.@{theme-name} {
    background-color: #333;
    color: #fff;
  }
}

@transition-time: 0.35s;
.app-main {
  transition: padding-left @transition-time;
}

deep ​

:deep -> ::v-deep